<template>
  <ul>
    <li class="list-item" v-for="item in comments" :key="item.commentid" :commentid="item.commentid" :tid="item.tid">
      <div class="user-face fl">
        <img class="user-head" :src="avator" alt="">
      </div>
      <div class="con">
        <div class="user-info" @click="reply(item.commentid, item.tid, item.author)">
          <span class="user-name">{{ item.author }}</span>
        </div>
        <p class="desc">{{ item.content }}</p>
        <div class="reply-box" v-if="item.reply && item.reply.length > 0">
          <ul class="reply-list">
            <li v-for="(item2, index2) in item.reply" :key="index2">
              <div class="reply-info">
                <div v-if="item2.from" 
                  @click="reply(item.commentid, item2.from._id, item2.from.email)"
                  class="from-user r-user fl">
                  {{ item2.from.email }}
                </div>
                <div class="to-box clearfix fl" 
                  v-if="item2.to && item.tid != item2.to._id">
                  <div class="reply-desc fl">回复</div>
                  <div v-if="item2.to"
                    @click="reply(item.commentid, item2.to._id, item2.to.email)" 
                    class="to-user r-user fl">
                    {{ item2.to.email }}
                  </div>
                </div>
                <div class="quot fl">：</div>
                <div class="reply-txt">{{ item2.content }}</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="info clearfix">
          <span class="time fl">{{ item.createdAt }}</span>
          <span class="reply-num fl" @click="reply(item.commentid, item.tid, item.author)">回复</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ['comments'],
  data() {
      return {
        avator: 'http://avatar.wpn.itlukai.com/panda.jpg',
      }
  },
  methods: {
    reply(cid, tid, replyer) {
      this.$emit('reply-to', {cid, tid, replyer})
    },
  }
}
</script>

